<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="swiper.min.css">
</head>
<body>
	<div class="swiper-container">
	    <div class="swiper-wrapper">
	        <div class="swiper-slide" style="width: 300px; background-color: red; display: block;">Sliad</div>
	        <div class="swiper-slide" style="width: 200px; background-color: blue">Slide 2</div>
	        <div class="swiper-slide" style="width: 200px; background-color: yellow">Slide 3</div>
	    </div>
	    <!-- 如果需要分页器 -->
	    <div class="swiper-pagination"></div>
	    
	    <!-- 如果需要导航按钮 -->
	    <div class="swiper-button-prev"></div>
	    <div class="swiper-button-next"></div>
	    
	    <!-- 如果需要滚动条 -->
	    <div class="swiper-scrollbar"></div>
	</div>
	<script src = "swiper.min.js"></script>
	<script>        

	  var mySwiper = new Swiper ('.swiper-container', {
	    direction: 'horizontal',
	    loop: true,
	    autoplay:1000,
	    width:300,
	    // 如果需要分页器
	    // pagination: '.swiper-pagination',
	    
	    // 如果需要前进后退按钮
	    nextButton: '.swiper-button-next',
	    prevButton: '.swiper-button-prev',
	    
	    // 如果需要滚动条
	    scrollbar: '.swiper-scrollbar',
	  })        
	  </script>
</body>
</html>